<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>涵子易-一位爱摸鱼的程序员</title>
  <link rel="shortcut icon" href="aa.ico">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="">
  <script src="font/iconfont.js"></script>
  <style>
    .icon {
      width: 2em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }

    .icon-w {
      font-size: 16px;
      color: brown;
    }
  </style>

</head>

<body>

  <div class="card" data-state="#about">
    <div class="card-header">
      <div class="card-cover" style="background-image: url('img/user.jpg')"></div>
      <img class="card-avatar" src="img/user.jpg" alt="avatar" />
      <h1 class="card-fullname">涵子易<svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-caomeidangao
        "></use>
        </svg></h1>
      <h2 class="card-jobtitle">我是世界第一好骗</h2>
    </div>
    <div class="card-main">
      <div class="card-section is-active" id="about">
        <div class="card-content">
          <div class="card-subtitle">关于：</div>
          <p class="card-desc">02小奶狗一枚，纯情dk，爱吃草莓蛋糕，平常喜欢网站搭建以及食材烹饪，头号原神玩家，微微二次元<br> PS：如果你是jk女孩预购从速，请点击下方按钮联系我.
          </p>
        </div>
        <div class="card-social">
          <a href="https://user.qzone.qq.com/1413278693/infocenter" target="_blank"><svg class="icon"
              aria-hidden="true">
              <use xlink:href="#icon-QQkongjian
              "></use>
            </svg></a>
          <a href="https://weibo.com/u/7458450435" target="_blank"><svg class="icon-w" aria-hidden="true">
              <use xlink:href="#icon-weibo
              "></use>
            </svg></a>

        </div>
      </div>
      <div class="card-section" id="experience">
        <div class="card-content">
          <div class="card-subtitle">时间轴</div>
          <div class="card-timeline">
            <div class="card-item" data-year="2014">
              <div class="card-item-title">摸鱼的初中生活 <span></span></div>
              <div class="card-item-desc">每天都在摆大烂</div>
            </div>
            <div class="card-item" data-year="2017">
              <div class="card-item-title">逐梦的高中生活 <span></span></div>
              <div class="card-item-desc">永远为信仰而战这就是我要留给明天的答卷</div>
            </div>
            <div class="card-item" data-year="2020">
              <div class="card-item-title">上岸南信<span></span></div>
              <div class="card-item-desc">从此爱上了草莓蛋糕</div>
            </div>
            <div class="card-item" data-year="未来">
              <div class="card-item-title"> <span>期待与你一起谱写</span></div>
              <div class="card-item-desc"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-section" id="contact">
        <div class="card-content">
          <div class="card-subtitle">联系我</div>
          <div class="card-contact-wrapper">
            <div class="card-contact">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
                <circle cx="12" cy="10" r="3" />
              </svg>
              北极-北极熊生活的地方
            </div>
            <div class="card-contact">
              <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path
                  d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" />
              </svg>(+86)5201314
            </div>
            <div class="card-contact">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
                <path d="M22 6l-10 7L2 6" />
              </svg>
              我才不告诉你呢_(:з」∠)_

            </div>
            <button class="contact-me">GOOD DAY</button>
          </div>
        </div>
      </div>
      <div class="card-buttons">
        <button data-section="#about" class="is-active">个人主页</button>
        <button data-section="#experience">时间轴</button>
        <button data-section="#contact">联系我们</button>
      </div>
    </div>
  </div>

  <script src="js/script.js"></script>

</body>

</html>